<template>
  <div>
    <!-- 编辑区域 -->
    <div>
      <textarea v-model="currentShape.text" class="textarea"></textarea>
      <div v-if="currentShape.type === 'd-text'" class="text-12">
        <a-typography-text type="warning">
          <InfoCircleFilled />
          {{ t('谨慎修改') }}
        </a-typography-text>
      </div>
    </div>
    <a-card class="mb-4">
      <div class="flex flex-col gap-4">
        <div></div>
        <a-row>
          <a-col :span="8">
            <div>{{ t('字体大小') }}</div>
          </a-col>
          <a-col :span="16">
            <a-input-number v-model:value="currentShape.fontSize"></a-input-number>
          </a-col>
        </a-row>
        <a-row :gutter="12" justify="end">
          <a-col :span="8">
            <div>{{ t('字体') }}</div>
          </a-col>
          <a-col :span="16">
            <a-select
              v-model:value="currentShape.fontFamily"
              :options="fontFamilyList"
              :field-names="{ label: 'title' }"
              @change="setFontFamily"
            ></a-select>
          </a-col>
          <!--  -->
        </a-row>
        <a-row>
          <a-col :span="8">
            <div>{{ t('背景颜色') }}</div>
          </a-col>
          <a-col :span="16"><ColorPicker v-model="currentShape.bgcolor"></ColorPicker></a-col>
        </a-row>
        <!--  -->
        <a-row>
          <a-col :span="8">
            <div>{{ t('字体颜色') }}</div>
          </a-col>
          <a-col :span="16"><ColorPicker v-model="currentShape.textColor"></ColorPicker></a-col>
        </a-row>
        <!--  -->
        <a-row>
          <a-col :span="8">
            <div>{{ t('换行') }}</div>
          </a-col>
          <a-col :span="16">
            <a-radio-group v-model:value="currentShape.wrap" :options="wrapOptions"></a-radio-group>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <div>{{ t('对齐') }}</div>
          </a-col>
          <a-col :span="16">
            <TextPosition v-model:value="currentShape.textPosition" />
          </a-col>
        </a-row>
      </div>
    </a-card>
    <a-card>
      <div class="flex flex-wrap justify-between">
        <a-checkbox v-model:checked="currentShape.arabic" @change="toArabic">
          {{ t('阿拉伯') }}
        </a-checkbox>
        <a-checkbox v-model:checked="currentShape.format">{{ t('分隔符') }}</a-checkbox>
        <a-checkbox v-model:checked="currentShape.overflow">
          <span>{{ t('超出隐藏') }}</span>
        </a-checkbox>
        <a-checkbox v-model:checked="currentShape.bold">
          <span>{{ t('加粗') }}</span>
        </a-checkbox>
        <a-checkbox v-model:checked="underline" @change="setUnderline">
          <span>{{ t('下划线') }}</span>
        </a-checkbox>
        <a-checkbox v-model:checked="lineThrough" @change="setLineThrough">
          <span>{{ t('删除线') }}</span>
        </a-checkbox>
        <a-checkbox v-model:checked="currentShape.wordWrap">
          <span>{{ t('单词换行') }}</span>
        </a-checkbox>
      </div>
      <div class="flex gap-4 items-center">
        <div v-if="currentShape.type === 'd-text'" class="flex justify-between items-center gap-2">
          <div>{{ t('显示小数') }}</div>
          <a-switch size="small" v-model:checked="currentShape.decimal.hasDecimal"></a-switch>
        </div>
        <a-button @click="textCheckout">{{ t('自动宽高') }}</a-button>
      </div>
    </a-card>

    <DynamicConfig
      class="mt-4"
      v-if="
        currentShape.type === 'd-text' &&
        Number(currentShape.fieldType) === 1 &&
        currentShape.decimal.hasDecimal
      "
    ></DynamicConfig>
  </div>
</template>

<script setup lang="ts">
import { getFonts } from '@/api/modules/esl/home';
import { currentShape } from '../../../data/shapes';
import { getTextDomRect } from '../../../utils/dom.utils';
import TextPosition from './TextPosition.vue';
import DynamicConfig from './components/DynamicConfig.vue';
import { InfoCircleFilled } from '@ant-design/icons-vue';

const { t } = useI18n();
/**
 * 注释: 打开文本高级配置
 *
 * */

const wrapOptions = [
  {
    label: '原始格式',
    value: 'pre',
  },
  {
    label: '自动换行',
    value: 'normal',
  },
  {
    label: '不换行',
    value: 'nowrap',
  },
];
const underline = ref(false);

const lineThrough = ref(false);

function getArabic(number: number): any {
  // eslint-disable-next-line no-restricted-globals
  if (isNaN(number)) {
    return number;
  }
  const easternArabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];

  const numberString = String(number);
  let result = '';

  for (let i = 0; i < numberString.length; i += 1) {
    const char = numberString[i];
    if (char === '.') {
      result += '.';
    } else {
      const digit = parseInt(char!, 10);
      result += easternArabicNumbers[digit];
    }
  }

  return result;
}

const toArabic = () => {
  if (currentShape.value.arabic) {
    const number = getArabic(currentShape.value.text);
    // eslint-disable-next-line no-restricted-globals
    if (isNaN(number)) {
      currentShape.value.text = number;
    }
  }
};

const fontFamilyList = ref<Array<any>>([]);

function textCheckout() {
  const rect = getTextDomRect(currentShape.value as any);
  currentShape.value.w = Math.round(rect.width);
  currentShape.value.h = Math.round(rect.height);
  currentShape.value.lineHeight = rect.height;
}
onMounted(async () => {
  const { data } = await getFonts();
  fontFamilyList.value = data.data;
});

/**
 * 注释: 设置字体
 *
 * */
const setFontFamily = (fontFamily: any) => {
  const target = fontFamilyList.value.find(item => {
    if (item.value === fontFamily) {
      return item;
    }
    return null;
  });
  const head = document.querySelector('head') as HTMLHeadElement;
  const style = document.createElement('style');
  style.append(
    ` @font-face{
        font-family:'${target.value}';
        src:url('${target.url}');
      }
    `,
  );
  head.append(style);
  currentShape.value.fontFamily = target.value;
};

const setUnderline = () => {
  if (currentShape.value.decoration !== 'underline') {
    currentShape.value.decoration = 'underline';
  } else {
    currentShape.value.decoration = '';
  }
};
const setLineThrough = () => {
  if (currentShape.value.decoration !== 'line-through') {
    currentShape.value.decoration = 'line-through';
  } else {
    currentShape.value.decoration = '';
  }
};
watch(
  currentShape,
  () => {
    underline.value = currentShape.value.decoration === 'underline';
    lineThrough.value = currentShape.value.decoration === 'line-through';
    // wrap.value = currentShape.value.wrap !== "nowrap";
  },
  {
    deep: true,
    immediate: true,
  },
);
</script>

<style lang="scss" scoped>
.position-title {
  line-height: 1.5;
}
.warning-text {
  font-size: 12px;
  position: absolute;
  bottom: calc(0% + 10px);
  left: 5px;
}
textarea {
  width: 100%;
  border: 1px solid #eee;
  padding: 8px;
  resize: vertical;
  outline: none;
}
.format {
  height: 32px;
  line-height: 32px;
}
.arco-divider {
  margin: 12px 0;
}
</style>
